import React from 'react';
import '../assets/style/userlist.scss'
import {Table, Space, Button, Popconfirm, message, Modal, Radio, Input, Breadcrumb} from 'antd';
import { getuserinfo, deleteuser } from "../util/api";
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import dayjs from "dayjs";


class Userlist extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: null,
            visible: false,
            activeuser: null,
        }
        this.deleteclick = this.deleteclick.bind(this)
        this.handleCancel = this.handleCancel.bind(this)
        this.showModal = this.showModal.bind(this)
    }

    componentDidMount(){
        this.getuserinfo()
    }

    async deleteclick(item){
        const res = await deleteuser(item.uid)
        const { success, data } = res.data
        if(success){
            message.success('删除成功');
            this.getuserinfo()
        }
    }

    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    // 初始化
    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
            activeuser: null,
            value: 1,
        });
    };
    // 点击传值
    showModal = item => {
        console.log('item',item)
        item.birthday = dayjs(item.birthday).format('YYYY-MM-DD')
        if(item.sex == '男'){
            this.setState({
                value: 1,
                activeuser: item,
                visible: true,
            })
        }else {
            this.setState({
                value: 2,
                activeuser: item,
                visible: true,
            })
        }
    };

    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    };

    async getuserinfo(){
        const res = await getuserinfo()
        const { success, data } = res.data
        if(success){
            const uinfo = []
            data.map((r,index)=>{
                uinfo.push({
                    uid: r.uid,
                    index: index+1,
                    key: index+1,
                    name: r.username,
                    sex: r.sex,
                    address: r.area,
                    role: r.role,
                    phone: r.phone,
                    birthday: r.birthday,
                    signature: r.signature,
                })
            })
            this.setState({data: uinfo})
        }
    }

    render() {
        console.log('dorendere')
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
        };
        const tailLayout = {
            wrapperCol: { offset: 8, span: 16 },
        };
        const columns = [
            {
                title: '序号',
                dataIndex: 'index',
                key: 'index',
            },
            {
                title: '昵称',
                dataIndex: 'name',
                key: 'name',
                render: text => <a>{text}</a>,
            },
            {
                title: '性别',
                dataIndex: 'sex',
                key: 'sex',
            },
            {
                title: '地址',
                dataIndex: 'address',
                key: 'address',
            },
            {
                title: '角色',
                dataIndex: 'role',
                key: 'role',
            },
            {
                title: '手机号',
                dataIndex: 'phone',
                key: 'phone',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => {
                    console.log('ac',this.state.activeuser)
                    return <Space size="middle">
                        <Button type="primary" shape="circle" onClick={() => this.showModal(record)}
                                icon={<EditOutlined/>}/>

                        <Popconfirm
                            title="你确定要删除该用户?"
                            onConfirm={() => this.deleteclick(record)}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type="primary" shape="circle" icon={<DeleteOutlined/>}/>
                        </Popconfirm>
                    </Space>
                }
            },
        ];
        return(

            <div className="userlist">
                <div className="ulist-tit">
                    <Breadcrumb>
                        <Breadcrumb.Item>主导页</Breadcrumb.Item>
                        <Breadcrumb.Item>用户管理</Breadcrumb.Item>
                        <Breadcrumb.Item>用户列表</Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <Table columns={columns} dataSource={this.state.data} />
                <Modal
                    title="查看用户详情"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    maskStyle={{backgroundColor: "#00000020"}}
                >
                    <div className="username">
                        <span>昵称:</span>
                        <Input disabled  value={this.state.activeuser?this.state.activeuser.name:''} />
                    </div>
                    <div className="username">
                        <span>性别:</span>&#12288;
                        <Radio.Group disabled value={this.state.value}>
                            <Radio value={1}>男</Radio>
                            <Radio value={2}>女</Radio>
                        </Radio.Group>
                    </div>
                    <div className="username">
                        <span>地址:</span>
                        <Input disabled  value={this.state.activeuser?this.state.activeuser.address:''} />
                    </div>
                    <div className="username">
                        <span>角色:</span>
                        <Input disabled  value={this.state.activeuser?this.state.activeuser.role:''} />
                    </div>
                    <div className="username">
                        <span>电话:</span>
                        <Input disabled  value={this.state.activeuser?this.state.activeuser.phone:''} />
                    </div>
                    <div className="username">
                        <span>生日:</span>
                        <Input disabled  value={this.state.activeuser?this.state.activeuser.birthday:''} />
                    </div>
                    <div className="username">
                        <span>个性签名:</span>
                        <Input disabled  value={this.state.activeuser?this.state.activeuser.signature:''} />
                    </div>

                </Modal>
            </div>
        )
    }
}

export default Userlist
